<template>
  <a-modal
    :visible.sync="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    title="新增"
    width="616px"
    wrapClassName="manageGroup-add-modal-container"
    :footer="null"
    @cancel="_handleCancel()"
  >
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
      <a-form-model-item ref="proName" label="项目名称" prop="proName">
        <a-select
          v-model="ruleForm.proName"
          placeholder="请选择项目名称"
          v-loading="proNameLoading"
        >
          <a-select-option
            :value="item.tenantCode"
            v-for="item in projectList"
            :key="item.tenantCode"
          >
            {{ item.proName }}
          </a-select-option>
          <a-select-option value="beijing"> Zone two </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="groupName" label="群组名称" prop="groupName">
        <a-input v-model="ruleForm.groupName" placeholder="请输入群组名称" />
      </a-form-model-item>
    </a-form-model>
    <!-- 底部 -->
    <div class="modal-footer flex">
      <a-button @click="_handleCancel()"> 取消 </a-button>
      <a-button
        type="primary"
        style="margin-left: 10px"
        v-loading="submitLoading"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </a-modal>
</template>

<script>
import { getProjectList } from "@/api/user-center/equipmentManage.js";
import { addGroup } from "@/api/user-center/manageGroup.js";
import { getLoginData } from "@/tools";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      submitLoading: false,
      ruleForm: {
        proName: undefined,
        groupName: undefined,
      },
      projectList: [],
      proNameLoading: false,
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
        proName: [
          { required: true, message: "请选择项目名称", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        val && this.getProjectList();
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { proName, groupName } = this.ruleForm;
          this.submitLoading = true;
          addGroup({
            tenantCode: proName,
            groupName: groupName,
          })
            .then((res) => {
              this.$message.success("操作成功");
              this.$parent.getList();
              this._handleCancel();
            })
            .catch((_) => {
              this.$message.error("操作失败，请稍后重试！");
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    //【查询条件】查询项目名称
    getProjectList() {
      this.proNameLoading = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getProjectList({ userId })
          .then((res) => {
            let { data } = res;
            this.projectList = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.projectList = [];
            reject();
          })
          .finally((_) => {
            this.proNameLoading = false;
          });
      });
    },

    _handleCancel() {
      this.$emit("update:visible", false);
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.manageGroup-add-modal-container {
  .ant-modal-body {
    padding-right: 80px;
    padding-left: 40px;
  }
  /deep/.ant-form {
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 100px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
  }

  .modal-footer {
    justify-content: center;
    align-items: center;
    padding: 20px 0 10px 0;
  }
}
</style>
